<template>
  <div>
    <div class="sales-text">采单统计</div>
    <span class="sales-tip">
      温馨提示：采单统计，可以帮助您统计和分析各销售老师通过表单获取的线索量和占比，
      并自动生成销售排行。在方便您进行业绩核算的同时也帮助您通过数据反馈高效进行过程管控。
    </span>
    <div style="margin-top: 15px">
      <ve-bar :data="chartData" :settings="chartSettings"></ve-bar>
    </div>
  </div>
</template>

<script>
import { orderStatisticsData } from '@/api/customForm'
export default {
  props: {
    id: Number,
  },
  data() {
    this.chartSettings = {
        dimension: ['姓名'],
        metrics: ['采单数',]
      }
    return {
      chartData: {
        columns: ['姓名', '采单数','采单数占比'],
        rows: [
        ],
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      orderStatisticsData(this.id)
        .then((res) => {
          let arr = JSON.parse(JSON.stringify(res))
          let arr1 = []
          if (arr.length > 0) {
            arr.forEach((item) => {
              arr1.push({
                '姓名': item.user_name,
                '采单数': Number(item.num),
                '采单数占比': item.proportion,
              })
            })
          }
         
          this.chartData.rows=arr1
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
  },
}
</script>

<style lang="less" scoped>
.sales-text {
  margin: 7px 16px 8px;
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  line-height: 22px;
}
.sales-tip {
  margin-left: 16px;
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  line-height: 17px;
}
</style>